<style lang="less">
@import './style.less';
</style>

<template>
    <div class="role">
        <div class="op-header">
            <el-button
                v-has="110103"
                class="add"
                type="info"
                @click="add">
                <i class="el-icon-circle-plus icon-right" />新增角色
            </el-button>
            <div class="search">
                <el-input
                    class="search-input "
                    v-model="searchInput"
                    placeholder="请输入查询关键字"
                    prefix-icon="el-icon-search" />
                <el-button
                    class="search-button"
                    type="primary"
                    @click="search">
                    <i class="el-icon-search icon-right" />查询
                </el-button>
            </div>
        </div>
        <table-ex
            :rows="roles"
            :total="rolesTotal"
            :columns="columns"
            :options="options"
            :on-option="onClickOption"
            :on-operation="onClickOperation"
            :on-page-change="onPageChange" />
        <dialog-ex
            v-if="!!dialogModal"
            :title="this.dialogModal === 'add' ? '新增角色' : '编辑角色'"
            :form="form"
            :mode="dialogModal"
            :init="currentRole"
            :treeData="rights"/>
    </div>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import pageConfig from './config'

    import tableEx from '@/components/table/tableEx'
    import dialogEx from '@/components/dialog/dialogEx'

    export default {
        name: 'role',
        components: {
            'table-ex': tableEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                // 绑定输入
                searchInput: '',
                columns: pageConfig.columns,
                options: pageConfig.options,
                currentRole: {},
                dialogModal: '',
                form: {
                    items: pageConfig.addRoleFormItems,
                    actions: {
                        cancel: () => {
                            this.dialogModal = ''
                        },
                        confirm: (data, mode) => {
                            if (mode === 'add') {
                                this.addRole(data)
                            }
                            if (mode === 'edit') {
                                let params = {
                                    id: data.id,
                                    ...data
                                }
                                this.editRole(params)
                            }
                            this.dialogModal = ''
                        }
                    }
                }
            }
        },
        created() {
            this.loadData()
        },
        computed: {
            ...mapGetters([
                'roles',
                'rights',
                'rolesTotal'
            ])
        },
        methods: {

            ...mapActions([
                'getRoles',
                'removeRole',
                'addRole',
                'editRole',
                'getAuthorities'
            ]),
            ...mapMutations(['SETROLEPAGE']),


            loadData() {
                this.getRoles()
                this.getAuthorities()
            },

            add() {
                this.dialogModal = 'add'
            },

            search() {
                const filter = {
                    title: this.searchInput ? this.searchInput : null,
                }
                this.SETROLEPAGE({
                    number: 1,
                    filter
                })
                this.getRoles()
            },

            onClickOption(option, rows) {
                if (option === 'batchrefresh') {
                    this.loadData()
                } else {
                    let lIds = rows.map(item => { return item.id })
                    this.removeRole({ lIds })
                }
            },

            onClickOperation(oper, row) {
                const id = row.id
                const prop = oper.prop
                switch(prop) {
                    case 'delete': {
                        this.removeRole({
                            lIds: [id]
                        })
                        break
                    }
                    case 'edit': {
                        this.currentRole = row
                        this.dialogModal = 'edit'
                        break
                    }
                    default: {
                    }
                }
            },

            onPageChange(number) {
                this.SETROLEPAGE({ number })
                this.getRoles()
            }
        }
    }
</script>



